<script setup>
const imgDefult = 'https://www.keaitupian.cn/cjpic/frombd/1/253/2565880906/2862557700.jpg'

const topItems = [
  {
    id: 1,
    icon: '/static/user/setup.svg',
    text: '我的设置'
  },
  {
    id: 1,
    icon: '/static/user/setup.svg',
    text: '我的设置'
  },
  {
    id: 1,
    icon: '/static/user/setup.svg',
    text: '我的设置'
  },
  {
    id: 1,
    icon: '/static/user/setup.svg',
    text: '我的设置'
  }
]
</script>
<template>
  <fui-nav-bar :isFixed="true" :isOccupy="true" title="用户信息">
  </fui-nav-bar>
  <view class="user">
    <view class="user_avatar">
      <image :src="imgDefult" />
      <view class="avatar_name_box">
        <view class="user_name">
          <text>库杜斯</text>
          <image class="vip_svg" src="/static/user/vip.svg" />
        </view>
        <view class="user_id">ID:54499928220</view>
        <view class="user_content">
          <image class="user_vip" src="/static/user/userVip.svg" />
          <text>精选会员特权</text>
          <fui-icon :size="23" color="#4ec2c7" name="arrowright"></fui-icon>
        </view>
      </view>
      <view class="setup">
        <image mode="scaleToFill" src="/static/user/setup.svg" />
      </view>
    </view>
    <view class="vip_box">
      <view class="vip_open_box">
        <view class="open_box_text">
          <view class="box_text_top">开通会员</view>
          <view class="text_top_content">开通会员享受更多权益，快试试吧~</view>
        </view>
        <view class="open_vip_btn">立即开通</view>
      </view>
    </view>
    <view class="top_tabs">
      <view class="top_tabs_item" v-for="(item, index) in topItems" :key="index">
        <view class="top_tabs_item_box">
          <image :src="item.icon" />
        </view>
        <view class="top_tabs_item_text">{{ item.text }}</view>
      </view>
    </view>
    <view style="width: 100%;">
      <fui-section title="我的订单"></fui-section>
    </view>
    <view class="top_order">
      <view class="top_order_box" v-for="(item, index) in topItems" :key="index">
        <view class="top_order_box_image">
          <image :src="item.icon" />
        </view>
        <view class="top_order_box_text">{{ item.text }}</view>
      </view>
    </view>
    <view style="width: 100%;">
      <fui-section title="我的订单"></fui-section>
    </view>
    <view class="top_order">
      <view class="top_order_box" v-for="(item, index) in topItems" :key="index">
        <view class="top_order_box_image">
          <image :src="item.icon" />
        </view>
        <view class="top_order_box_text">{{ item.text }}</view>
      </view>
    </view>
    <view style="width: 100%;">
      <fui-section title="我的订单"></fui-section>
    </view>
    <view class="top_order">
      <view class="top_order_box" v-for="(item, index) in topItems" :key="index">
        <view class="top_order_box_image">
          <image :src="item.icon" />
        </view>
        <view class="top_order_box_text">{{ item.text }}</view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.user {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 20rpx;


  .user_avatar {
    margin: 15rpx;
    width: 100%;
    height: 175rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;

    image {
      width: 140rpx;
      height: 140rpx;
      border-radius: 99999rpx;
    }

    .avatar_name_box {
      width: 394rpx;
      height: 144rpx;
      display: flex;
      justify-content: space-between;
      flex-direction: column;

      .user_name {
        display: flex;
        align-items: center;

        text {
          font-size: 40rpx;
        }

        .vip_svg {
          margin: 15rpx;
          width: 55rpx;
          height: 32rpx;
        }
      }

      .user_id {
        font-size: 24rpx;
        color: rgba(153, 153, 153, 1);
      }

      .user_content {
        width: 216rpx;
        height: 34rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .user_vip {
          width: 32rpx;
          height: 32rpx;
        }

        text {
          font-size: 24rpx;
          background: linear-gradient(302.79deg, #12868C 7.39%, #5DDAE0 71.89%, #A2FAFF 98.88%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }
    }

    .setup {
      width: 96rpx;
      height: 96rpx;
      background: linear-gradient(302.79deg, rgba(18, 134, 140, 0.1) 7.39%, rgba(93, 218, 224, 0.1) 71.89%, rgba(162, 250, 255, 0.1) 98.88%);
      border-radius: 30rpx;
      display: flex;
      align-items: center;
      justify-content: center;

      image {
        width: 48rpx;
        height: 48rpx;
      }
    }
  }

  .vip_box {
    width: 100%;
    height: 184rpx;
    display: flex;
    align-items: center;
    justify-content: center;

    .vip_open_box {
      width: 670rpx;
      height: 108rpx;
      background: linear-gradient(106.08deg, #12868C 21.65%, #5DDAE0 75.24%, #A2FAFF 97.67%);
      border-radius: 40rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .open_box_text {
        margin: 50rpx;

        .box_text_top {
          font-size: 32rpx;
          color: rgba(255, 255, 255, 1);
        }

        .text_top_content {
          font-size: 20rpx;
          color: rgba(255, 255, 255, 1);
        }
      }

      .open_vip_btn {
        margin: 45rpx;
        width: 136rpx;
        height: 58rpx;
        background: rgba(18, 134, 140, 1);
        border-radius: 80rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24rpx;
        color: rgba(255, 255, 255, 1);
      }
    }
  }

  .top_tabs {
    width: 100%;
    height: 222rpx;
    display: flex;
    align-items: center;
    justify-content: space-around;

    .top_tabs_item {
      width: 96rpx;
      height: 144rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-direction: column;

      .top_tabs_item_box {
        width: 96rpx;
        height: 96rpx;
        background: rgba(255, 255, 255, 1);
        border-radius: 30rpx;
        display: flex;
        align-items: center;
        justify-content: center;

        image {
          width: 46rpx;
        }
      }

      .top_tabs_item_text {
        font-size: 24rpx;
        color: rgba(102, 102, 102, 1);
      }
    }
  }

  .top_order {
    margin: 20rpx;
    width: 670rpx;
    height: 184rpx;
    background: #fff;
    border-radius: 40rpx;
    display: flex;
    align-items: center;
    justify-content: space-around;

    .top_order_box {
      width: 96rpx;
      height: 144rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-direction: column;

      .top_order_box_image {
        width: 100%;
        height: 96rpx;
        background: #f3f5f5;
        border-radius: 30rpx;
        display: flex;
        align-items: center;
        justify-content: center;

        image {
          width: 46rpx;
        }
      }

      .top_order_box_text {
        font-size: 24rpx;
        color: rgba(102, 102, 102, 1);
      }
    }
  }
}
</style>
